<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍类别分布 - 纵横小说推荐榜数据可视化平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/chart-styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 顶部区域 -->
    <header class="header">
        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" class="logo">
        <h1 class="system-title">纵横小说推荐榜数据可视化平台</h1>
    </header>

    <!-- 左侧导航栏 -->
    <nav class="sidebar">
        <a href="/" class="nav-item">
            <i class="fas fa-book-open fa-fw"></i>
            <span>图书列表</span>
        </a>
        <a href="/charts" class="nav-item active">
            <i class="fas fa-chart-pie fa-fw"></i>
            <span>书籍类别分布</span>
        </a>
        <a href="/bar-chart" class="nav-item">
            <i class="fas fa-chart-bar fa-fw"></i>
            <span>类别点击量分析</span>
        </a>
        <a href="/line-chart" class="nav-item">
            <i class="fas fa-chart-line fa-fw"></i>
            <span>字数与推荐数关系</span>
        </a>
        <a href="/boxplot" class="nav-item">
            <i class="fas fa-chart-simple fa-fw"></i>
            <span>状态与周推荐数</span>
        </a>
        <a href="/ranking-chart" class="nav-item">
            <i class="fas fa-trophy fa-fw"></i>
            <span>书籍点击量排名</span>
        </a>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <h2 class="page-title">书籍类别分布</h2>

        <div class="chart-container">
            <div class="chart-header">
                <h3 class="chart-title">
                    <i class="fas fa-chart-pie"></i>
                    书籍类别分布占比
                </h3>
                <div class="chart-actions">
                    <button id="downloadBtn" class="action-button">
                        <i class="fas fa-download"></i>
                        <span>下载图表</span>
                    </button>
                    <button id="refreshBtn" class="action-button">
                        <i class="fas fa-sync-alt"></i>
                        <span>刷新数据</span>
                    </button>
                </div>
            </div>

            <div class="chart-description">
                <i class="fas fa-info-circle"></i>
                <p>此图表展示了纵横小说推荐榜中各个类别书籍的数量分布情况，通过环形图直观地显示每个类别的占比。</p>
            </div>

            <div id="loadingIndicator" class="loading">
                <div class="loading-spinner"></div>
            </div>

            <div id="chart" class="chart"></div>
        </div>
    </main>

    <script>
        // 初始化ECharts实例
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);

        // 显示加载状态
        function showLoading() {
            document.getElementById('loadingIndicator').style.display = 'flex';
        }

        // 隐藏加载状态
        function hideLoading() {
            document.getElementById('loadingIndicator').style.display = 'none';
        }

        // 获取图表数据并渲染
        async function fetchDataAndRender() {
            showLoading();

            try {
                const response = await fetch('/api/category-distribution');
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }

                const data = await response.json();

                // 配置图表选项
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        type: 'scroll',
                        textStyle: {
                            color: '#333'
                        }
                    },
                    series: [
                        {
                            name: '书籍数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: true,
                            itemStyle: {
                                borderRadius: 4,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b}: {c} ({d}%)'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '14',
                                    fontWeight: 'bold'
                                },
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            data: data
                        }
                    ],
                    color: [
                        '#1890ff', '#13c2c2', '#52c41a', '#faad14', '#f5222d',
                        '#722ed1', '#eb2f96', '#fa8c16', '#a0d911', '#fadb14',
                        '#2f54eb', '#fa541c', '#391085', '#9254de', '#36cfc9'
                    ]
                };

                // 渲染图表
                myChart.setOption(option);

            } catch (error) {
                console.error('获取数据失败:', error);
                myChart.showLoading({
                    text: '数据加载失败，请刷新重试',
                    maskColor: 'rgba(255, 255, 255, 0.8)',
                    textColor: '#ff4d4f'
                });
            } finally {
                hideLoading();
            }
        }

        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', fetchDataAndRender);

        // 窗口大小改变时调整图表大小
        window.addEventListener('resize', () => {
            myChart.resize();
        });

        // 刷新按钮点击事件
        document.getElementById('refreshBtn').addEventListener('click', fetchDataAndRender);

        // 下载按钮点击事件
        document.getElementById('downloadBtn').addEventListener('click', () => {
            const url = myChart.getDataURL({
                type: 'png',
                pixelRatio: 2,
                backgroundColor: '#fff'
            });

            const link = document.createElement('a');
            link.download = '书籍类别分布.png';
            link.href = url;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>
</html>
